<template>
  <div class="overview">
    <el-row>
      <el-col :span="24">
        <el-card shadow="hover">
          <div class="homeText">
            <div class="homeImge">
              <img src="@/assets/img/微信图片_20230518194548.jpg" alt="" />
            </div>
            <div class="homeInfo">
              <div class="title">{{ greetings }}</div>
              <div class="info">现在的时间是 {{ dateInfo }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card shadow="hover">
          <el-timeline>
            <el-timeline-item timestamp="2023/3/20" placement="top">
              <el-card>
                <h4>技术栈</h4>
                <p>Vue3、TypeScript、Vite</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2023/3/20" placement="top">
              <el-card>
                <h4>第三方依赖库</h4>
                <p>
                  axios、countup、dayjs、animate.css、echarts、element-plus、pinia、vue-router、vue-i18n
                </p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2023/3/20" placement="top">
              <el-card>
                <h4>代码规范和提交</h4>
                <p>prettier、cz-conventional-changelog、commitizen、husky</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { formatDay } from '@/utils/format'
const dateInfo = ref('')
const greetings = ref('')
dateInfo.value = formatDay(new Date())
setInterval(() => {
  dateInfo.value = formatDay(new Date())
}, 1000)
let time_now = new Date()
let hour = time_now.getHours() //小时
if (hour < 6) {
  greetings.value = '凌晨好'
} else if (hour < 11) {
  greetings.value = '早上好'
} else if (hour < 13) {
  greetings.value = '中午好'
} else if (hour < 18) {
  greetings.value = '下午好'
} else if (hour < 23) {
  greetings.value = '晚上好'
}
time_now
</script>

<style lang="less" scoped>
.el-col {
  margin-bottom: 20px;
}
.homeText {
  display: flex;
  align-items: center;
  .homeImge {
    margin-right: 10px;
    img {
      width: 140px;
      height: 140px;
      border-radius: 50%;
    }
  }
  .homeInfo {
    display: flex;
    flex-direction: column;
    .title {
      margin-bottom: 20px;
      font-size: 22px;
    }
    .info {
      font-size: 14px;
    }
  }
}
</style>
